<template>
  <div class="analysis in-mask">
      <transition name='upin'>
        <div class="anal-body" v-show="$parent.analShow">
            <div class="anal-close" @click="analClose()"></div>
            <div class="anal-main">
                <div class="anal-mod">
                    <div class="title">注释</div>
                    <div class="anotate">{{poe.annotate ? poe.annotate : '暂无注释'}}</div>
                </div>
                <div class="anal-mod">
                    <div class="title">翻译</div>
                    <div class="translate"><span>译</span>{{poe.translation ? poe.translation : '暂无翻译'}}</div>
                    <!-- <ul class="translate">
                        <li v-for="(item,index) in poe.Translate" :key="index">{{item}}</li>
                    </ul>-->
                </div>
            </div>
            
        </div>
     </transition>
  </div>
</template>

<script>
 import { getParames,touchFalse,touchTrue } from '@/utils/common'
//  import { axGet,urlFun } from '@/api/index'

export default {
  name: 'poetryList',
  props:[
      "poe",
  ],
  data () {
    return {
      userid:sessionStorage.getItem("userid"),
      poetryList:[],
      num1:0,
      num2:0,
      hasNav:false,
      type:'必背古诗',
      listPage:1,
      totalPage:1,
      bottomTip:'暂无数据',
    }
  },
  mounted:function(){

   
  },
  methods:{
    analClose(){
         this.$emit('analysisClose')
    },
  }
}
</script>
<style  lang="scss" scoped>
    @import '~@/assets/scss/_public.scss';
    //赏析
.analysis{
    .anal-body{
        background: #fff;
        @include elementSize(100%,85%);
        position:absolute;
        left: 0;
        bottom: 0;
        border-radius: 0.44rem 0.44rem 0 0;
        .anal-close{
            position: absolute;
            right: 0.32rem;
            top: 0.32rem;
            z-index: 10;
            @include elementSize(0.5rem,0.5rem);
            background: url(~@/assets/img/close.png) no-repeat 0 center;
            background-size: 100% 100%;
        }
        .anal-main{
            height: 100%;
            box-sizing:border-box;
            -webkit-box-sizing:border-box;
            padding-top: 0.3rem;
            // padding: 1.4rem 0 0 0.32rem;
            overflow: hidden;
            overflow-y: scroll;
            &::-webkit-scrollbar{
                display:none;
            }
            -webkit-overflow-scrolling: touch;
        } 
        .anal-mod{
            color: #000;
            font-size: 0.34rem;
            border-bottom: 0.2rem solid #eff1f3;
            padding: 0.2rem 0.32rem 0.3rem;
            line-height: 0.56rem;
            position: relative;
            &:last-child{
                border: 0;
            }
            .title{
                font-size: 0.36rem;
                font-weight: bold;
                border-bottom: 1px solid #e0e0e0;
                height: 0.74rem;
                line-height: 0.74rem;
                margin-bottom: 0.14rem;
                width: 100%;
                background-color: #fff;
                position: absolute;
            }
            .anotate{
                // text-indent: 1em;
                // padding-top: 1rem;
                max-height: 4rem;
                min-height: 2rem;
                overflow: auto;
                margin-top: 1rem;
            }
            .translate{
                color: #666;
                padding-left: 0.52rem;
                position: relative;
                max-height: 4rem;
                min-height: 2rem;
                overflow: auto;
                margin-top: 1rem;
                span{
                    @include elementSize(0.36rem,0.36rem);
                    position: absolute;
                    left: 0;
                    top: 0.1rem;
                    background: #33cc89;
                    color: #fff;
                    font-size: 0.24rem;
                    border-radius: 0.08rem;
                    line-height: 0.36rem;
                    text-align: center;
                } 
            }
        } 
    } 
}
    
</style>